<template>
  <t-config-provider :global-config="globalLocale">
      <t-table
        row-key="id"
        :data="data"
        :columns="columns"
        :bordered="bordered"
        :size="size"
        :rowspan-and-colspan="rowspanAndColspan"
        cell-empty-content="-"
        resizable
        lazy-load
        @row-click="handleRowClick"
      >
    </t-table>
    </t-config-provider>
     <div class="score-btn" v-if="from !== 1 && approvalProcess === 3" >
    <t-space :size="8" >
      <t-button variant="outline" theme="default" @click="goLast">上一步</t-button>
      <!-- <t-button variant="outline" theme="default" @click="goSave">保存</t-button> -->
      <t-button theme="primary" @click="goNext">下一步</t-button>
    </t-space>
  </div>
</template>
<script lang="jsx" setup>
import { reactive, ref } from 'vue';
// import { useRouter } from 'vue-router';
import { CaretDownSmallIcon } from 'tdesign-icons-vue-next';
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  from : {
    type: Number,
    default: 0
  },
  approvalProcess : {
    type: Number,
    default: 0
  }
})
const emit = defineEmits(["goNext","goLast"]);
// const router = useRouter();
const bordered = ref(true);
const size = ref('medium');
const globalLocale = ref({
  table: {
    sortIcon: (h) => h && <CaretDownSmallIcon size="16px" />,
  },
});    
const columns = ref([
  { colKey: 'domain', title: '能力域' ,width:'120'},
  { colKey: 'item', title: '能力项',ellipsis: true,width:'150'},
  { colKey: 'level1', title: 'Level', wdith:'100'},
  { colKey: 'level2', title: 'Leve2', wdith:'100' },
  { colKey: 'level3', title: 'Leve3', wdith:'100' },
  { colKey: 'nlLevel', title: '能力得分', wdith:'100' },
  { colKey: 'domainLevel', title: '能力域得分' },
  { colKey: 'weight', title: '域权重', wdith:'100' ,
    cell: (h, { row }) => {
        return (
          <div class="txt" >
            { row.weight}
          </div>
        );
      },
  },
  { colKey: 'grade', title: '能力域等级'},
  { colKey: 'total', title: '综合分数'},
  { colKey: 'allGrade', title: '综合等级' },
]);
const handleRowClick = (e) => {
  console.log(e);
};

//上一步
const goLast = () =>{
  emit('goLast')
}
 //下一步
 const goNext = () =>{
    emit('goNext')
 }

//可合并的表格
const rowspanAndColspan = ({ col, rowIndex, colIndex }) => {
  //colIndex 列   rowIndex 行
  if ((colIndex === 0 || colIndex === 6) && (rowIndex ===0 || rowIndex === 3 || rowIndex === 10 || rowIndex === 13 ) ) {
    return {
      colspan: 1,
      rowspan: 3,
    };
  }
  if ( (colIndex === 0 || colIndex === 6) && (rowIndex === 6 || rowIndex === 16 || rowIndex === 20 || rowIndex === 24 )) {
    return {
      colspan: 1,
      rowspan: 4,
    };
  }
  if(colIndex === 9 || colIndex === 10 ){
    return {
      colspan: 1,
      rowspan: 28,
    };
  }
};
       
</script>
<style lang="scss" scoped>
.score-btn{
  width: 100%;
  margin-top: 20px;
  align-items: center;
  display: flex;
  justify-content: flex-end;
}
:deep(.txt){
   color:#FF4D65 ;
}
:deep(.t-pagination__total ){
  flex: none;
  margin-right: 10px;
  color: #1D2129;
}

:deep(.t-table__content) {
  border: 1px solid #E5E6EB;
  border-radius: 8px;
}
:deep(.t-table__header >tr) {
  background-color: #F7F8FA;
}
// :deep(.t-table__th-cell-inner) {
//   color: #4E5969;
//   font-size: 14px;
//   font-weight: 600;
// }
.home-container{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.top-container{
  display: flex;
  height: 88px;
  background: var(--bg-white);
  border-radius: 8px;
  padding: 0 16px;
  position: relative;
  &__img{
    width: 56px;
    height: 56px;
    margin-right: 10px;
    margin-top: 16px;
  }
  &__title{
      color: #565960;
      font-size: 12px;
      margin-top: 16px;
    }
   
    &__value{
      color: #252931;
      font-size: 18px;
      font-weight: bold;
      margin-top: 16px;
    }  
    &__btn{
      right: 16px;
      top: 16px;
      position: absolute;
      color: #1966FF;
    }
}
.index {
  padding: 0;
  margin-top: 16px;
}
</style>
